<%-- 
    Document   : pertanyaan_taha_main
    Created on : Aug 13, 2012, 2:09:37 PM
    Author     : ubuntu
--%>
<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Kemaskini Profil</title>
        <script type="text/javascript">
            $(document).ready(function(){
                check1();
//                document.getElementById("place").innerHTML=document.getElementById("alamat4").value;
                $("#poskod").autocomplete({                    
                    source: function( request, response ) {
                        var val = $("#negeri").val();
                        var url = '${pageContext.request.contextPath}/poskod/' + val +'?viewPoskodAndDesc';
                        $.ajax({
                            url: url,
                            dataType: "text",
                            data: {
                                name_startsWith: request.term
                            },                            
                            success: function( data ) {      
                                var splitData =  data.split(",");                               
                                response(splitData);
                            }
                        });
                    }
                });
                
                if(typeof String.prototype.trim !== 'function') {
                    String.prototype.trim = function() {
                      return this.replace(/^\s+|\s+$/g, ''); 
                    }
                  }
            });
            
            function toUpperCase(id){
                var inpobj = document.getElementById(id);
                inpobj.value = inpobj.value.toUpperCase();
            }
            
            function regextest(evt) {
                var theEvent = evt || window.event;
                var key = theEvent.keyCode || theEvent.which;
                key = String.fromCharCode( key );                
                var regex = /^[a-zA-Z ]+$/;
                if( !regex.test(key) ) {
                  theEvent.returnValue = false;
                  if(theEvent.preventDefault) theEvent.preventDefault();
                }
            }
            function regextest1(evt){
                var theEvent = evt || window.event;
                var key = theEvent.keyCode || theEvent.which;
                key = String.fromCharCode( key );                
                var regex = /^[0-9]+$/;
                if( !regex.test(key) ) {
                  theEvent.returnValue = false;
                  if(theEvent.preventDefault) theEvent.preventDefault();
                }
            }
                
            function divide()
            {
                var poskod=document.getElementById("poskod").value.trim();
                document.getElementById("poskod").value=poskod.substr(0,5);
                document.getElementById("alamat4").value=poskod.substr(6,poskod.length);
                document.getElementById("place").innerHTML=document.getElementById("alamat4").value;            
            }
            
            function check1()
            {
                var patt=new RegExp("-");
                var c=patt.test("${actionBean.deposit.noKp}");
                if(c)
                {
                   blinkKp();     
                }
                if(("${actionBean.deposit.tarikhLahir}")=="")
                {
                    blinkTarik();
                }
                return;
            }
            function blinkKp() 
            {
                var f = document.getElementById("kp");
                f.style.color="red";
                f.innerHTML="Sila kemaskini di kaunter TH berhampiran";
                setInterval(function() {
                f.style.display = (f.style.display == 'none' ? '' : 'none');
                }, 1000);
                return;
            }
            function blinkTarik() 
            {
                var f = document.getElementById("tarik");
                f.style.color="red";
                f.innerHTML="Sila kemaskini di kaunter TH berhampiran";
                setInterval(function() {
                f.style.display = (f.style.display == 'none' ? '' : 'none');
                }, 1000);
                return;
            }
            
            function validate()
            {
                var alamat=document.getElementById("alamat1");
                var negeri=document.getElementById("negeri");
                var notel1=document.getElementById("notel1");
                var notel2=document.getElementById("notel2");
                var notel3=document.getElementById("notel3");
                var poskod=document.getElementById("poskod");
                var email=document.getElementById("email");
                var mname=document.getElementById("mname");
                var kahwinan=document.getElementById("kahwinan"); 
              
              if(!Perkahwinan_validate(kahwinan)){
                  return false;                  
              }              
              else if (!alamat_validate(alamat)){
                  return false;
              }else if (!notel1_validate(notel1, notel2, notel3)){
                  return false;
              }else if(!negeri_validate(negeri)){
                  return false;
              }else if(!poskod_validate(poskod)){
                  return false;
              }else if(!mname_validate(mname)){
                  return false;
              }else{
                  blockUI();
                  return true;
              }   
            }
            
            
            function alamat_validate(alamat)
            {
                if(alamat.value.length<=80 && alamat.value.length>=1)
                {
                        return true;
                }
                else
                {
                    alert("Sila masukkan alamat yang sah");
                    alamat.focus();
                    return false;
                }
            }
            function negeri_validate(negeri)
            {
                if(negeri.value=="")
                {
                        alert("Sila masukkan negeri");
                        return false;
                }
                else
                    return true;
            }
            function notel1_validate(notel1, notel2, notel3)
            {
                if(notel1.value.trim().length <1 && notel2.value.trim().length < 1 && notel3.value.trim().length < 1){
                    alert("Salah satu no telefon wajib diisi" );
                    notel1.focus();
                    return false;
                }                
                return true;
            }
            function mname_validate(mname)
            {
                if(mname.value.length>=1 && mname.value.length<=80)
                {
                    return true;
                }
                else
                {
                    alert("Sila isikan nama ibu");
                    mname.focus();
                    return false;
                }
            }
            function poskod_validate(poskod)
            {
                if(poskod.value.trim().length>1)
                {
                    return true;
                }
                else
                {
                    alert("Sila masukkan poskod");
                    poskod.focus();
                    return false;
                }
            }
            
             function Perkahwinan_validate(kahwinan)
            {
                if(kahwinan.value=="")
                {
                        alert("Sila masukkan Status Perkahwinan");
                        return false;
                }
                else
                    return true;
            }           
            
            function validate1(f)
            {
                if(validate())
                {                        
                    f.action = "${pageContext.request.contextPath}/deposit?previewEditProfile";
                    f.submit();
                }
            }                
            
            function resetAll()
            {
                document.getElementById("alamat1").value="";
                document.getElementById("negeri").value="";
                document.getElementById("notel1").value="";
                document.getElementById("notel2").value="";
                document.getElementById("email").value="";
                document.getElementById("mname").value="";
                document.getElementById("alamat2").value="";
                document.getElementById("alamat3").value="";
                document.getElementById("kahwinan").value="";
                document.getElementById("pekerjaan").value="";
                document.getElementById("poskod").value="";
                document.getElementById("place").value="";
                
            }

        </script>
    </head>
    <body>
        <s:messages/>
         
        <br/>
        <s:useActionBean beanclass="th.stripes.util.ListUtil" id="listUtil" />
        <s:form beanclass="th.stripes.action.DepositActionBean" class="niceform">
          
            <s:hidden name="deposit.noAkaun" id="noAkaun"></s:hidden> 
            <s:hidden name="deposit.noKp" id="noKp"></s:hidden> 
            <s:hidden name="deposit.nama" id="nama"></s:hidden>
            <s:hidden name="deposit.jantina.nama" id="jantina"></s:hidden>
            <s:hidden name="deposit.jantina.kod" id="jantina"></s:hidden>
            <s:hidden name="deposit.tarikhLahir" id="tarikLahir"></s:hidden>
            <s:hidden name="deposit.warganegara.nama" id="warganegara_nama"></s:hidden>
            <s:hidden name="deposit.warganegara.kod" id="warganegara"></s:hidden>
            <s:hidden name="deposit.nama" id="nama"></s:hidden>
            <s:hidden name="deposit.bangsa" id="bangsa"></s:hidden>
            <s:hidden name="deposit.noTel3" id="notel3"></s:hidden>
            <s:hidden name="deposit.alamat4" id="alamat4"></s:hidden>
            <div id="content">
                <div id="logo">
                    <span>
                        <img src="${pageContext.request.contextPath}/images/img/ribbon.png"/>               
                    </span>
                </div>
                <h3>
                    Kemaskini Profil
                </h3> 
                <p>
                    <label>No. Akaun TH :</label>
                    ${actionBean.deposit.noAkaun}&nbsp;
                </p>
                <p>
                    <label>No. KP Semasa :</label>
                    ${actionBean.deposit.noKp}&nbsp;&nbsp;<span id="kp"></span>
                </p>
                <p>
                    <label>Nama :</label>
                    ${actionBean.deposit.nama}&nbsp;
                </p>
                <p>
                    <label>Jantina :</label>
                    ${actionBean.deposit.jantina.nama}&nbsp;
                </p>
                <p>
                    <label>Kewarganegaraan :</label>
                    ${actionBean.deposit.warganegara.nama}&nbsp;
                </p>
                <p>
                    <label>Tarikh Lahir :</label>
                    <fmt:formatDate value="${actionBean.deposit.tarikhLahir}" pattern="dd/MM/yyyy" />&nbsp;&nbsp;<span id="tarik"></span>
                </p>
                <p>
                    <label>Status Perkahwinan :</label>
                        <s:select name="deposit.kahwin.kod" id="kahwinan">
                        <s:option value="">Sila Pilih</s:option>
                        <c:forEach items="${listUtil.senaraiPerkahwinan}" var="item">
                            <s:option value="${item.kod}">${item.kod} - ${item.nama}</s:option>
                        </c:forEach>
                    </s:select>
                </p>
                <p>
                    <label><font color="red">*</font>Alamat :</label>
                        <s:text name="deposit.alamat1" id ="alamat1" maxlength="30" onblur="toUpperCase(this.id)"/>&nbsp;
                </p>
                <p>
                    <label>&nbsp;</label>
                    <s:text name="deposit.alamat2" id="alamat2" maxlength="30" onblur="toUpperCase(this.id)"/>&nbsp;
                </p>
                <p>
                    <label>&nbsp;</label>
                    <s:text name="deposit.alamat3" id="alamat3" maxlength="30" onblur="toUpperCase(this.id)"/>&nbsp;
                </p>           
                <p>
                    <label><font color="red">*</font>Negeri :</label>
                    <s:select name="deposit.negeri.code"  id="negeri">
                        <s:option value="">Sila Pilih</s:option>
                        <c:forEach items="${listUtil.senaraiNegeri}" var="item">
                            <s:option value="${item.code}">${item.code} - ${item.desc}</s:option>
                        </c:forEach>
                    </s:select>
                </p>
                <p>
                    <label><font color="red">*</font>Poskod :</label>
                    <s:text name="deposit.poskod" id="poskod" size="20" maxlength="5" onblur="divide()"/>&nbsp;&nbsp;<span id="place">${actionBean.deposit.alamat4}</span>
                </p>
                <p>
                    <label><font color="red">*</font>No Telefon&nbsp;&nbsp;</label><br>                        
                </p>
                <p style="height: 23px;">
                    <label>Rumah :</label>
                        <s:text name="deposit.noTel1" id="notel1" maxlength="12" onkeypress='regextest1(event)'/>&nbsp;&nbsp;
                </p>
                <p style="height: 23px;">
                    <label>Pejabat :</label>
                        <s:text name="deposit.noTel2" id="notel2" maxlength="12" onkeypress='regextest1(event)'/>&nbsp;&nbsp;
                </p>
                <p style="height: 15px;">
                    <label>Bimbit :</label>
                    <%-- <s:text name="deposit.noTel3" id="notel3"/>&nbsp;&nbsp;--%>
                    ${actionBean.deposit.noTel3}&nbsp;                    
                </p>
                <p style="height: 15px;">
                            <label><font size="1">Sila isi salah satu no. telefon</font><label>
                </p>
                <p style="width: 600px;">
                    <label>Emel :</label>
                        <s:text name="deposit.email" id="email" style="float:left;" />&nbsp;
                </p>
                <p style="width: 600px;">
                    <label><font color="red">*</font>Nama Ibu :</label>
                    <s:text name="deposit.namaDatuk" class="required" id="mname" style="float:left;" onkeypress='regextest(event)' onblur="toUpperCase(this.id)"/>&nbsp;
                </p>
                <p style="width: 600px;">
                    <label>Sektor Pekerjaan :</label>
                    <s:select name="deposit.sektorPekerjaan.kod" id="pekerjaan" style="float:left;">
                        <s:option value="">Sila Pilih</s:option>
                        <c:forEach items="${listUtil.senaraiSektorPekerjaan}" var="item">
                            <s:option value="${item.kod}">${item.kod} - ${item.nama}</s:option>
                        </c:forEach>
                    </s:select>
                </p>
                <p align="left" style="width: 600px; float: left; clear: both;">
                     <font size="2">Ruangan mandatori bertanda <font color="red">*</font> adalah wajib diisi.</font>
                </p>
                <p align="center" style="width: 600px; clear: both;">                     
                    <s:button name="simpan1" value="Simpan" class="button green" onclick="validate1(this.form)"/>
                    <s:button name="reset1" value="Isi Semula" onclick="resetAll()" class="button green"/>
                </p>
                <br/>
            </div>
        </s:form>
    </body>
</html>
